import React, { useEffect, useState } from 'react'
import {getBannerList,getProList,getNavList} from '../../api/home'
import { AtGrid, AtList, AtListItem, AtIcon } from "taro-ui"
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
import ProList from '../../components/proList'
import './index.scss'
import { useReachBottom, usePageScroll, usePullDownRefresh } from '@tarojs/taro'
import Taro from "@tarojs/taro"

const Index = () => {

  const [banners,setBanners] = useState()

  const [navList,setNavList] = useState()

  const [proList,setProList] = useState()

  useEffect(()=>{
    getBannerList().then(res => {
      // console.log(res);
      setBanners(res.data)
    })
    setNavList(getNavList())

    getProList().then(res => {
      // console.log(res);
      setProList(res.data)
    })

  }, [])

  const [count, setCount] = useState(2)
  // 上拉加载更多
  useReachBottom(() => {
    getProList({count}).then(res => {
      if(res.data.length <= 0){
        // 没有数据，轻提示
      }else {
        setProList([...proList, ...res.data])
        setCount(count + 1)
      }
    })
  })

  const [scrollTop,setScrollTop] = useState(0)
  usePageScroll((res) => {
    // console.log(res.scrollTop)
    setScrollTop(res.scrollTop)
  })


  usePullDownRefresh(()=>{
    getProList().then(res => {
      setProList(res.data)
      setCount(2)
      Taro.stopPullDownRefresh()
    })
  })
  return (
    <View>
        <Swiper style={{width: '100%', height: 200}} autoplay indicatorDots interval={1000}>
          {banners && banners.map(item => {
            return (<SwiperItem key={item.bannerid}>
              <Image style={{width: '100%', height: 200}} src={item.img} />
            </SwiperItem>)
          })}
        </Swiper>

        <View class={'grid'}>
          {navList && (<AtGrid columnNum={5} data={navList}></AtGrid>)}
        </View>

        {/* <AtList>
          {proList && proList.map(item => {
            return (<AtListItem
              note={item.proname}
              thumb={item.img1}
            />)
          })}
          
        </AtList> */}

        {proList && proList.map(item => {
            return (<ProList
              key={item.proid}
              title={item.proname}
              img={item.img1}
              proid={item.proid}
            />)
          })}

      {scrollTop > 300 && (<AtIcon onClick={()=>{
        console.log(Taro);
        Taro.pageScrollTo({
          scrollTop: 0,
					duration: 100
        })
      }} className='backTop' value='chevron-up' size='60' color='#F00'></AtIcon>)}
      

    </View>
  )
}

export default Index